<template>
  <el-sub-menu v-if="props.htmlNav.children.length" :index="props.htmlNav.id">
    <template #title>
      <span>{{ props.htmlNav.title }}</span>
    </template>
    <el-sub-menu-comp
      v-for="item in props.htmlNav.children"
      :key="item.id"
      :htmlNav="item"
    />
  </el-sub-menu>
  <router-link v-else :to="props.htmlNav.link">
    <el-menu-item :index="props.htmlNav.id">
      {{ props.htmlNav.title }}
    </el-menu-item>
  </router-link>
</template>
<script setup lang="ts">
type itemType = {
  id: string;
  pid: string;
  link: string;
  title: string;
  img: string;
  children: Array<itemType>;
};
const props = defineProps<{
  htmlNav: itemType;
}>();
</script>
<style lang="scss" scoped></style>
